今天學習如何使用 CSS Transitions，讓網頁元素在狀態改變時，能有平滑的轉場效果，讓使用者體驗更好。

Transitions 的核心就是讓屬性的變化不再是瞬間完成，而是在一段時間內漸變。
幾個常用的 Transitions 屬性：

• transition-property： 指定要進行轉場的 CSS 屬性。如 color、background-color。
• transition-duration： 指定轉場效果的持續時間，單位為 s (秒) 或 ms (毫秒)。
• transition-timing-function： 轉場的變化速度曲線，如 ease (預設)、linear、ease-in、ease-out。
• transition-delay： 轉場開始前的延遲時間。

通常將這些屬性合併寫成一行：transition: property duration timing-function delay;

導覽列的連結加上轉場效果，讓滑鼠懸停時的顏色變化更平滑。
在 style.css 中修改導覽列的樣式：

CSS

.main-nav li a {
  /* ... (其他樣式不變) ... */
  transition: background-color 0.3s ease; /* 在 0.3 秒內平滑變換背景色 */
}
.main-nav li a:hover {
  background-color: #e74c3c;
}

現在當將滑鼠移到連結上時，背景色的變化將會變得非常順暢，而不是瞬間切換。這是一個很小的細節，但能大大提升網頁的質感。

執行成果 :